Icon box

Icon box is a modular content element that displays an icon alongside a title and optional description. It is commonly used to communicate key features, services, or benefits in a compact and visually structured layout. This component supports icon selection, text alignment, and responsive display settings to ensure consistent presentation across devices.

Section settings

General settings

Setting
Description

Section width

3 options for container

  • Stretch width: span the section width regardless of screen size.

  • Fixed width: depends on your page content width in Theme settings -> Layout.

  • Full width: takes up the entire space on the page and it usually resizes itself to fit the size of the screen.

Color scheme

Select colors from Theme settings -> Colors

Section header settings

Setting
Description

Subheading

The subheading of the section

Heading

The title of the section

Enable heading underline animation

Turn on an animated underline effect for headings. Switch off to keep a static look.

Underline style

Choose the underline’s look. Include:

  • Include: Simple underline – Clean straight line beneath the text.

  • Curve stroke: Soft, hand-drawn curved stroke for a casual feel.

  • Squiggle underline: Wavy line for a lively, attention-grabbing look.

* Note: Only appears when Enable heading underline animation is enabled

Underline color

Pick the color used for the underline. * Note: Only appears when Enable heading underline animation is enabled

Description

The description of the section

Heading size

The size of the title:

  • Small

  • Medium

  • Large

Alignment

The position of the heading and description.

  • Left

  • Center

  • Right

Column gap

4 options for column gap

  • No gap

  • Small

  • Medium

  • Large

Icon settings

Setting
Description

Size

Setting icon's width

Position

Determine logo's position on desktop

Setting
Description

Alignment

Setting the text alignment

Size

Setting text size

Setting
Description

Enable carousel on mobile

The setting that enable the carousel layout on mobile

Items per row

Determine the number of items per row

Section padding

Setting
Description

Top

Customize the top margin of the section

Bottom

Customize the bottom margin of the section

Section divider

Setting
Description

Show divider

Toggles the visibility of a horizontal divider line within the section.

Block settings

Setting
Description

Image

Select your desired image to display

Svg icon

You can use one of our svg icons instead

Heading, Description

Customize block content

Last updated